<template>
    <div>
      <van-row>
        <van-col span="24">
          <van-nav-bar fixed :border="false" style="background: none;" @click-left="onClickLeft"  safe-area-inset-top >
            <template #left>
                <van-icon color="black" style="font-weight:bolder;" name="arrow-left" size="20" />
            </template>
          </van-nav-bar>
        </van-col>
        <van-col span="24">
          <van-image
              width="100%"
              height="50%"
              fit="fill"
              src="https://gitee.com/herther/img/raw/master/img/20210914161025.png"
          />
        </van-col>
        <van-col span="24">
          <van-cell-group inset style="margin-top: 10px;">
            <van-cell>
              <template #title>
                  <span style="font-weight: bold; font-size: 1.2em;">畅享双人餐</span>
              </template>
              <template #label>
                <span>月销 30</span>
                <br>
                <span>
                  <van-tag plain type="danger">百亿补贴</van-tag>
                </span>
              </template>
              <template #default>
                 <span style="font-size: 1.3em; color: #f52443; display: block; padding-top:3px;">
                      ￥ 21.9
                </span>
                <span style="font-size: .9em; padding-left: 10px; text-decoration: line-through; color: #a3a3a3; display: block; padding-top:3px;">
                      ￥ 46
                </span>
              </template>
            </van-cell>
          </van-cell-group>
        </van-col>
        <van-col span="24">
          <van-cell-group inset style="margin-top: 10px;" >
            <van-cell>
              <span style="font-size: 1em; font-weight: bold;">商品详情</span>
              <div style="display: flex;">
                <div style="display: flex; flex-direction: column; justify-content: space-between; ">
                  <span>商品描述 </span>
                  <span>原料</span>
                </div>
                <div style="display: flex; flex-direction: column; justify-content: space-between; ">
                    <span style="padding-left: 5px;">香辣鸡排堡2个+黑椒鸡块+薯条+中可2杯</span>
                    <span style="padding-left: 5px;">马铃薯，鸡肉</span>
                </div>
              </div>
            </van-cell>
          </van-cell-group>
        </van-col>
      </van-row>

    </div>
</template>

<script>
export default {
  name: "ProductDetail",
  methods:{
    onClickLeft(){
      this.$router.replace("/merchantDetail")
    }
  }
}
</script>

<style scoped>

</style>
